<template>
  <!-- SINGLE VIDEO -->
  <div id="single-video" class="container-fluid standard-bg">
    <div class="col-lg-1"></div>
    <!-- SINGLE VIDEO -->
    <div class="row col-lg-10">
      <div class="col-ms-12">
        <div class="col-md-9 panel panel-default novel-panel-left">
          <div class="panel-heading">
            <h3 class="panel-title">《{{ manga.name }}》{{ txt.title }}</h3>
          </div>
          <div class="panel-body" :style="novelSettings.style">
            <div class="text-center">
              <div class="btn btn-info text-center" @click="prevChapter">上一话</div>
              <div class="btn btn-info text-center" @click="scrollToMenu">目录</div>
              <div class="btn btn-info text-center" @click="nextChapter">下一话</div>
            </div>
            <h3 class="page-header">{{ txt.title }}</h3>
              <img v-for="item in txt.content" :key="item.id" v-lazy="item.content" alt="" style="width: 100%;">
            <div class="spacer"></div>
            <div class="text-center">
              <div class="btn btn-info text-center" @click="prevChapter">上一话</div>
              <div class="btn btn-info text-center" @click="scrollToMenu">目录</div>
              <div class="btn btn-info text-center" @click="nextChapter">下一话</div>
            </div>
            <div class="spacer"></div>
          </div>
        </div>
        <div class="col-md-2">
          <div class="panel panel-default novel-panel-right">
            <div class="panel-heading">阅读背景</div>
            <div class="panel-body">
              <div class="color-item" v-for="item in novelBgList" :key="item.id" :style="item.style"
                   :class="{'novel-active': novelSettings.color === item.id}" @click="changeColor(item.id)"></div>
            </div>
            <div class="panel-heading">正文字体</div>
            <div class="panel-body">
              <div class="btn btn-default" v-for="item in novelFontList" :key="item.id" :style="item.style"
                   :class="{'novel-active': novelSettings.font === item.id}" @click="changeFont(item.id)">{{ item.name }}</div>
            </div>
<!--            <div class="panel-heading">字体大小</div>-->
<!--            <div class="panel-body">面板内容</div>-->
          </div>
        </div>
      </div>

      <div class="spacer"></div>
      <!-- SINGLE VIDEO -->
      <div id="single-video-wrapper" class="col-lg-8 col-md-8">
        <div class="row">
          <!-- VIDEO SINGLE POST -->
          <div>
            <!-- POST L size -->
            <article class="post-video">
              <!-- VIDEO INFO -->
              <div class="video-info">
                <div class="spacer"></div>
                <article class="col-lg-3 col-md-3 col-xs-4 post post-medium single-video">
                  <div class="thumbr">
                    <a class="post-thumb" href="javascript:;">
                      <span class="play-btn-border" title="Play"><i
                        class="fa fa-play-circle headline-round" aria-hidden="true"></i></span>
                      <div class="cactus-note ct-time font-size-1 tag-only" v-if="manga.tag === 1"><span>独家</span></div>
                      <div class="cactus-note ct-time font-size-1 tag-vip" v-if="manga.tag === 2"><span>会员专享</span></div>
                      <img class="img-responsive" v-lazy="manga.cover" alt="#">
                    </a>
                  </div>
                </article>
                <div class="col-lg-9">
                  <h3 class="title main-head-title">
                    {{ manga.name }}
                    <span class="btn btn-primary pull-right">追书</span>
<!--                    <span class="btn btn-default pull-right">已追</span>-->
                  </h3>
                  <div class="metabox">
                    <span class="meta-i">
                      <i class="fa fa-user"></i><a href="#" class="author" title="John Doe">{{ manga.author }}</a>
                   </span>
                      <span class="meta-i">
                      <i class="fa fa-clock-o"></i>{{ manga.startTime | startTimeFilter }}开始连载
                   </span>
                      <span class="meta-i">
                      <i class="fa fa-eye"></i>{{ manga.count | countFormatFilter }} 阅读
                   </span>
                    <div class="ratings">
                      {{ manga.status | statusFilter }}&nbsp;&nbsp;&nbsp;&nbsp;{{ manga.score | scoreFilter }}
                      <span v-html="printStar"></span>
                    </div>
                  </div>
                  <ul class="social">
                    <li class="social-qq"><a href="https://qzone.qq.com/" target="_blank"
                                             class="fa fa-qq social-icons" title="官方QQ"></a></li>
                    <li class="social-weixin"><a href="https://weixin.qq.com/" target="_blank"
                                                 class="fa fa-weixin social-icons" title="官方微信"></a></li>
                    <li class="social-weibo"><a href="https://weibo.com/" target="_blank"
                                                class="fa fa-weibo social-icons" title="官方微博"></a></li>
                    <li class="social-twitter"><a href="http://www.twitter.com/" target="_blank"
                                                  class="fa fa-twitter social-icons" title="官方推特"></a></li>
                    <li class="social-facebook"><a href="http://www.facebook.com/" target="_blank"
                                                   class="fa fa-facebook social-icons" title="官方脸书"></a></li>
                  </ul>
                  <ul class="footer-tags">
                    <li><a href="#">videos</a></li>
                    <li><a href="#">premium</a></li>
                    <li><a href="#">hair</a></li>
                    <li><a href="#">beauty</a></li>
                  </ul>
                </div>
                <div class="clearfix"></div>
              </div>
              <div class="clearfix spacer"></div>
              <!-- DETAILS -->
              <div class="video-content">
                <h2 class="title main-head-title">简介
                  <a data-toggle="collapse" data-parent="#accordion" class="pull-right" href="#collapseOne">
                    <span @click="changeOpen" v-if="open">展开 <i class="fa fa-angle-down"></i></span>
                    <span @click="changeOpen" v-else>收起 <i class="fa fa-angle-up"></i></span>
                  </a>
                </h2>
                <div id="collapseOne" class="panel-collapse collapse">
                  <div class="panel-body" v-html="manga.info"></div>
                </div>
              </div>
              <div class="clearfix"></div>
            </article>

            <!-- COMMENTS -->
            <section id="comments">
              <h2 class="title">13984 评论</h2>
              <div class="widget-area">
                <div class="status-upload">
                  <form>
                    <textarea placeholder="发条友善的评论"></textarea>
                    <div class="comment-box-control">
                      <ul>
                        <li><a title="" data-placement="bottom" data-original-title="Video"><i
                          class="fa fa-video-camera"></i></a></li>
                        <li><a title="" data-placement="bottom" data-original-title="Picture"><i
                          class="fa fa-picture-o"></i></a></li>
                        <li><a title="" data-placement="bottom" data-original-title="Smile"><i
                          class="fa fa-smile-o"></i></a></li>
                      </ul>
                      <button type="submit" class="btn pull-right"><i class="fa fa-share"></i> 发表评论</button>
                    </div>
                  </form>
                </div><!-- Status Upload  -->
              </div><!-- Widget Area -->

              <div class="row comment-posts" v-if="false">
                <div class="col-sm-1">
                  <div class="thumbnail">
                    <img class="img-responsive user-photo" src="img/thumbs/thumb-review.jpg"
                         alt="Comment User Avatar">
                  </div>
                </div>

                <div class="col-sm-11">
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <strong>花间寻梅</strong> <span class="pull-right">2020-12-04 02:27</span>
                    </div>
                    <div class="panel-body">
                      这只蜥蜴人好厉害，竟然有名字！<br/>
                      再看看我们萌王这边，竟然！竟然！<br/>
                      全村都有名字～<br/>
                    </div>
                  </div>
                </div>

                <div class="col-sm-1">
                  <div class="thumbnail">
                    <img class="img-responsive user-photo" src="img/thumbs/thumb-review.jpg"
                         alt="Comment User Avatar">
                  </div>
                </div>

                <div class="col-sm-11">
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <strong>愿你的旅途充满幸福</strong> <span class="pull-right">2020-12-04 00:58</span>
                    </div>
                    <div class="panel-body">
                      史莱姆遇到骨王。<br/><br/>

                      萌王:小老弟你也是穿越来的?<br/><br/>

                      骨王:没想到你也是穿越来的。<br/>
                      <br/>
                      萌王:我是日本人。<br/>
                      <br/>
                      骨王:我也是日本人。<br/><br/>

                      萌王:我救了姓铃木的后辈，他说孩子以后要随我的名字，名叫悟。<br/><br/>

                      骨王:我叫铃木悟。<br/><br/>

                      萌王: ???<br/><br/>

                      骨王: !!<br/><br/>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </div>
        </div>
        <div class="clearfix spacer"></div>
      </div>
      <!-- SIDEBAR -->
      <div class="col-lg-4 col-md-4 hidden-sm hidden-xs" id="video-links">
        <aside class="dark-bg" >
          <article>
            <h2 class="icon"><i class="fa fa-gears" aria-hidden="true"></i>章节列表</h2>
            <ul class="sidebar-links">
              <li v-for="item in mangaDetails" :key="item.id" :class="{'active': item.play}">
                <a :href="item.href" :title="item.title">
                  <i class="fa fa-play"></i>
                  <span>{{ item.title }}</span>
                  <span class="tag tag-vip" v-if="item.auth === 3">会员</span>
                </a>
              </li>
            </ul>
          </article>
        </aside>
        <div class="clearfix spacer"></div>
        <div class="row" v-if="false">
          <!-- RELATED VIDEOS -->
          <div class="col-lg-12 col-md-12 col-sm-12 related-videos">
            <h2 class="icon"><i class="fa fa-trophy" aria-hidden="true"></i>相关推荐</h2>
            <div class="row auto-clear">
              <article class="col-lg-6 col-md-6 col-sm-4">
                <!-- POST L size -->
                <div class="post post-medium">
                  <div class="thumbr">
                    <a class="post-thumb" href="" data-lity>
                                 <span class="play-btn-border" title="Play"><i class="fa fa-play-circle headline-round"
                                                                               aria-hidden="true"></i></span>
                      <div class="cactus-note ct-time font-size-1"><span>02:02</span></div>
                      <img class="img-responsive" src="img/thumbs/thumb-s.jpg" alt="#">
                    </a>
                  </div>
                  <div class="infor">
                    <h4>
                      <a class="title" href="#">Video Lightbox Test</a>
                    </h4>
                    <span class="posts-txt" title="Posts from Channel"><i class="fa fa-thumbs-up"
                                                                          aria-hidden="true"></i>20.895</span>
                    <div class="ratings">
                      <i class="fa fa-star" aria-hidden="true"></i>
                      <i class="fa fa-star" aria-hidden="true"></i>
                      <i class="fa fa-star-half-o" aria-hidden="true"></i>
                      <i class="fa fa-star-o"></i>
                      <i class="fa fa-star-half"></i>
                    </div>
                  </div>
                </div>
              </article>
              <article class="col-lg-6 col-md-6 col-sm-4">
                <!-- POST L size -->
                <div class="post post-medium">
                  <div class="thumbr">
                    <a class="post-thumb" href="" data-lity>
                                 <span class="play-btn-border" title="Play"><i class="fa fa-play-circle headline-round"
                                                                               aria-hidden="true"></i></span>
                      <div class="cactus-note ct-time font-size-1"><span>02:02</span></div>
                      <img class="img-responsive" src="img/thumbs/thumb-s2.jpg" alt="#">
                    </a>
                  </div>
                  <div class="infor">
                    <h4>
                      <a class="title" href="#">I graduated from the university of Selfies</a>
                    </h4>
                    <span class="posts-txt" title="Posts from Channel"><i class="fa fa-thumbs-up"
                                                                          aria-hidden="true"></i>20.895</span>
                    <div class="ratings">
                      <i class="fa fa-star" aria-hidden="true"></i>
                      <i class="fa fa-star" aria-hidden="true"></i>
                      <i class="fa fa-star-half-o" aria-hidden="true"></i>
                      <i class="fa fa-star-o"></i>
                      <i class="fa fa-star-half"></i>
                    </div>
                  </div>
                </div>
              </article>
              <article class="col-lg-6 col-md-6 col-sm-4">
                <!-- POST L size -->
                <div class="post post-medium">
                  <div class="thumbr">
                    <a class="post-thumb" href="" data-lity>
                                 <span class="play-btn-border" title="Play"><i class="fa fa-play-circle headline-round"
                                                                               aria-hidden="true"></i></span>
                      <div class="cactus-note ct-time font-size-1"><span>02:02</span></div>
                      <img class="img-responsive" src="img/thumbs/thumb-s3.jpg" alt="#">
                    </a>
                  </div>
                  <div class="infor">
                    <h4>
                      <a class="title" href="#">I don’t always surf the internet, but when I do, Eyebrows</a>
                    </h4>
                    <span class="posts-txt" title="Posts from Channel"><i class="fa fa-thumbs-up"
                                                                          aria-hidden="true"></i>20.895</span>
                    <div class="ratings">
                      <i class="fa fa-star" aria-hidden="true"></i>
                      <i class="fa fa-star" aria-hidden="true"></i>
                      <i class="fa fa-star-half-o" aria-hidden="true"></i>
                      <i class="fa fa-star-o"></i>
                      <i class="fa fa-star-half"></i>
                    </div>
                  </div>
                </div>
              </article>
              <article class="col-lg-6 col-md-6 col-sm-4">
                <!-- POST L size -->
                <div class="post post-medium">
                  <div class="thumbr">
                    <a class="post-thumb" href="" data-lity>
                      <span class="play-btn-border" title="Play"><i class="fa fa-play-circle headline-round"
                         aria-hidden="true"></i></span>
                      <div class="cactus-note ct-time font-size-1"><span>02:02</span></div>
                      <img class="img-responsive" src="img/thumbs/thumb-s4.jpg" alt="#">
                    </a>
                  </div>
                  <div class="infor">
                    <h4>
                      <a class="title" href="#">A selfie a day keeps the friends away</a>
                    </h4>
                    <span class="posts-txt" title="Posts from Channel"><i class="fa fa-thumbs-up"
                                                                          aria-hidden="true"></i>20.895</span>
                    <div class="ratings">
                      <i class="fa fa-star" aria-hidden="true"></i>
                      <i class="fa fa-star" aria-hidden="true"></i>
                      <i class="fa fa-star-half-o" aria-hidden="true"></i>
                      <i class="fa fa-star-o"></i>
                      <i class="fa fa-star-half"></i>
                    </div>
                  </div>
                </div>
              </article>
              <article class="col-lg-6 col-md-6 col-sm-4">
                <!-- POST L size -->
                <div class="post post-medium">
                  <div class="thumbr">
                    <a class="post-thumb" href="" data-lity>
                      <span class="play-btn-border" title="Play"><i class="fa fa-play-circle headline-round"
                             aria-hidden="true"></i></span>
                      <div class="cactus-note ct-time font-size-1"><span>02:02</span></div>
                      <img class="img-responsive" src="img/thumbs/thumb-s5.jpg" alt="#">
                    </a>
                  </div>
                  <div class="infor">
                    <h4>
                      <a class="title" href="#">A selfie a day keeps the friends away</a>
                    </h4>
                    <span class="posts-txt" title="Posts from Channel"><i class="fa fa-thumbs-up"
                                                                          aria-hidden="true"></i>20.895</span>
                    <div class="ratings">
                      <i class="fa fa-star" aria-hidden="true"></i>
                      <i class="fa fa-star" aria-hidden="true"></i>
                      <i class="fa fa-star-half-o" aria-hidden="true"></i>
                      <i class="fa fa-star-o"></i>
                      <i class="fa fa-star-half"></i>
                    </div>
                  </div>
                </div>
              </article>
              <article class="col-lg-6 col-md-6 col-sm-4">
                <!-- POST L size -->
                <div class="post post-medium">
                  <div class="thumbr">
                    <a class="post-thumb" href="" data-lity>
                       <span class="play-btn-border" title="Play"><i class="fa fa-play-circle headline-round"
                                                                     aria-hidden="true"></i></span>
                      <div class="cactus-note ct-time font-size-1"><span>02:02</span></div>
                      <img class="img-responsive" src="img/thumbs/thumb-s6.jpg" alt="#">
                    </a>
                  </div>
                  <div class="infor">
                    <h4>
                      <a class="title" href="#">A selfie a day keeps the friends away</a>
                    </h4>
                    <span class="posts-txt" title="Posts from Channel"><i class="fa fa-thumbs-up"
                                                                          aria-hidden="true"></i>20.895</span>
                    <div class="ratings">
                      <i class="fa fa-star" aria-hidden="true"></i>
                      <i class="fa fa-star" aria-hidden="true"></i>
                      <i class="fa fa-star-half-o" aria-hidden="true"></i>
                      <i class="fa fa-star-o"></i>
                      <i class="fa fa-star-half"></i>
                    </div>
                  </div>
                </div>
              </article>
            </div>
            <div class="clearfix spacer"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-1"></div>
  </div>
</template>

<script>
import {getByAn, getByAv} from './play-js'

export default {
  name: 'Play',
  inject: ['reload'],
  data () {
    return {
      currentChapter: 0,
      open: true,
      manga: {name: 'NULL', cover: null, score: 0, count: 2000, startTime: new Date(), author: 'NULL', info: '<p>NULL</p>', status: 0},
      mangaDetails: [],
      txt: {title: 'NULL', content: []},
      novelBgList: [
        {id: 0, style: 'background: #fefefe;'},
        {id: 1, style: 'background: #c7edcc;'},
        {id: 2, style: 'background: #cce8cf;'},
        {id: 3, style: 'background: #d9cdb6;'}
      ],
      novelFontList: [
        {id: 0, name: '宋体', style: 'font-family: 宋体;'},
        {id: 1, name: '黑体', style: 'font-family: 黑体;'},
        {id: 2, name: '微软雅黑', style: 'font-family: 微软雅黑;'},
        {id: 3, name: '楷体', style: 'font-family: 楷体;'}
      ],
      novelSettings: {color: 0, font: 0, style: 'background: #fefefe;font-family: 宋体;'}
    }
  },
  mounted () {
    this.init()
  },
  computed: {
    printStar: function () {
      const arr = [
        '<i class="fa fa-star" aria-hidden="true"></i>\n',
        '<i class="fa fa-star-half-o" aria-hidden="true"></i>\n',
        '<i class="fa fa-star-o" aria-hidden="true"></i>\n'
      ]
      let str = ''
      let int = parseInt(this.manga.score / 2)
      for (let i = 0; i < int; i++) {
        str += arr[0]
      }
      const float = parseFloat(this.manga.score % 1)
      if (float >= 0.5) {
        str += arr[1]
        int++
      }
      for (let i = 5 - int; i > 0; i--) {
        str += arr[2]
      }
      return str
    }
  },
  methods: {
    init () {
      let path = this.$route.params.pathMatch
      if (path.includes('eq')) {
        getByAv(this, path.replace('eq', ''))
      } else if (path.includes('ss')) {
        getByAn(this, path.replace('ss', ''))
      }
    },
    changeOpen () {
      this.open = !this.open
    },
    changeColor (val) {
      this.novelSettings.color = val
      this.novelSettings.style = this.novelBgList[val].style + this.novelFontList[this.novelSettings.font].style
    },
    changeFont (val) {
      this.novelSettings.font = val
      this.novelSettings.style = this.novelFontList[val].style + this.novelBgList[this.novelSettings.color].style
    },
    scrollToMenu () {
      // 滚动到章节列表
      document.getElementById('video-links').scrollIntoView()
    },
    prevChapter () {
      // 上一章
      if (this.currentChapter > 0) {
        window.location.href = this.mangaDetails[this.currentChapter - 1].href
      }
    },
    nextChapter () {
      // 下一章
      if (this.currentChapter < this.mangaDetails.length - 1) {
        window.location.href = this.mangaDetails[this.currentChapter + 1].href
      }
    }
  },
  watch: {
    '$route': {
      handler: function () {
        document.documentElement.scrollTop = 0
        this.init()
      }
    }
  }
}
</script>

<style>
.is-selected {
  color: var(--secondary-color);
}
</style>
